import React, { useState } from "react";
import styles from "./Index.module.css";
import { Button, Form, Input } from "antd-mobile";
import {
  EyeInvisibleOutline,
  EyeOutline,
  LockOutline,
  MailOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import instance from "../../api/request";
import JSEncrypt from "jsencrypt";
import { outdeng } from "../store/qie/user";
import { useDispatch } from "react-redux";
function Index() {
  const dispatch = useDispatch();
  const publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB`;
  //创建一个加密器
  const encryptor = new JSEncrypt();
  //设置一个公钥
  encryptor.setPublicKey(publicKey);

  //加密函数
  const encrypt = (text) => {
    return encryptor.encrypt(text);
  };

  const [visible, setVisible] = useState(false);
  const nav = useNavigate();

  const Onfinish = (values) => {
    values.pwd=encrypt(values.pwd)
    instance.post("/api/user/v1/login", null, {
      params: values
    }).then((res) => {
      console.log(res);
      localStorage.setItem('userId',res.data.result.userId)
      localStorage.setItem('sessionId',res.data.result.sessionId)
      localStorage.setItem('headPic',res.data.result.headPic)
      localStorage.setItem('nickName',res.data.result.nickName)
      localStorage.setItem('email',res.data.result.email)
      dispatch(outdeng(res.data.result))
      nav('/home')
      
    });
  };

  return (
    <div className={styles.reg}>
      <div className={styles.biao}>
        <img src="/biao.png" alt="" />
      </div>

      <div className={styles.frrm}>
        <Form
          className="fn"
          onFinish={Onfinish}
          footer={
            <Button block type="submit" color="primary" className="btn">
              登录
            </Button>
          }
        >
          
          <Form.Item name="email">
            <div className={styles.field}>
              <span className={styles.icon}>
                <img src="./you.png" alt="" />
              </span>
              <Input  placeholder="请输入邮箱" />
            </div>
          </Form.Item>

          <Form.Item
            label=""
            name="pwd"
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <div className={styles.field}>
              <span className={styles.icon}>
                <img src="./mima.png" alt="" />
              </span>
              <Input
                placeholder="请输入密码"
                clearable
                type={visible ? "text" : "password"}
              />
            </div>
          </Form.Item>

          {/* <Form.Item>
          
          </Form.Item> */}
        </Form>
      </div>

      <div className={styles.xiaz}>
        <div onClick={() => nav("/wang")}>忘记密码</div>

        <div className={styles.you}>
          <div className={styles.you} style={{ fontSize: "11px" }}>
            暂无账号？
          </div>
          <div
            style={{ fontSize: "18px", marginTop: "-7px", marginLeft: "9px" }}
            onClick={() => nav("/reg")}
          >
            立即注册
          </div>
        </div>
      </div>

      <div className={styles.footer}>
        <div style={{ color: "white" }}>————其他登录方式————</div>
        <div>
          <img src="./wei.png" alt="" />
        </div>
      </div>
    </div>
  );
}

export default Index;
